<template>
 <div class="wrapper" ref="aaaa">  
     <ul class="content">
         <li>分类,使用better-scroll插件</li>
         <button @click="a()">12</button>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>111111111111</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1111111</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1111111111</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>11111111111</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>11111111111</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
         <li>11111111</li>
         <li>1</li>
         <li>1</li>
         <li>1</li>
     
     
     
     </ul>
 
 </div>
</template>

<script>
import BScroll from 'better-scroll'
 /* 当底部下拉距离超过阈值 */

export default({
    name:'category',
    data(){
        return {
            scroll: null
        }
    },
    // 组件创建完之后调用 - 组件全部创建完了 怎么拿到 .wapper标签呢？ 所以报错
    created(){
       
    },
    mounted(){
        /* better-scroll 插件 */
      /*   console.log(this.$refs.aaaa)
        console.log(document.querySelector('.wrapper')) */
        this.scroll = new BScroll(document.querySelector('.wrapper'),{
            probeType :3,
            pullUpLoad: true,
            click:true
        })

        this.scroll.on('scroll',(position) => {
            console.log(position)
        })
        this.scroll.on('pullingUp',() => {
            console.log(12)
        })
    },
    methods:{
        a(){
            console.log('a')
        }
    }
})

</script>

<style scoped>
/* 这是原生的代码，但是我们不会使用原生，使用原生再手机上会变得一卡一卡的 */
.wrapper{
    height: 150px;
    background-color: red;

     overflow: hidden; 
    /* overflow: scroll; */
}


</style>
